import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Button, Row, Form, Input } from 'antd'
import styles from './index.less'
import hex_sha1 from '../../utils/sha'

const FormItem = Form.Item

const Login = ({
  dispatch,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll,
  }, username, userpassword,
}) => {
 const handleOk= ()=> {
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      if('USER_PSW' in values)
      {
        values.USER_PSW=hex_sha1(values.USER_PSW);
      }
      dispatch({ type: 'login/login', payload: values })
    })
  }

  return (
    <div className={styles.form}>
      <div className={styles.logo}>
        <img alt={'logo'}  />
        <span></span>
      </div>
      <form>
        <FormItem hasFeedback>
          {getFieldDecorator('USER_NAME', {
            rules: [
              {
                required: true,
              },
            ],
          })(<Input size="large" onPressEnter={handleOk} placeholder="Username" />)}
        </FormItem>
        <FormItem hasFeedback>
          {getFieldDecorator('USER_PSW', {
            rules: [
              {
                required: true,
              },
            ],
          })(<Input size="large" type="password" onPressEnter={handleOk} placeholder="Password" />)}
        </FormItem>
        <Row>
          <Button type="primary" size="large" onClick={handleOk}>
            Sign in
          </Button>
          <p>
            <span>Username：guest</span>
            <span>Password：guest</span>
          </p>
        </Row>
      </form>
    </div>
  )
}

Login.propTypes = {
  form: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

function mapStateToProps(state) {
  const { USER_NAME, USER_PSW } = state.login;
  return {
    USER_NAME,
    USER_PSW,
  };
}

// export default ;

export default  connect(mapStateToProps)(Form.create()(Login))
